<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue组件</title>
    <script src="https://unpkg.com/vue@next"></script>
    <!-- 
        1.使用插槽和具名插槽解决组件内容传递问题
        2.插槽里传递内容,使用slot的时候要注意,slot不能直接绑定事件
        3.父组件想要往子组件里面插入一些结点的话,
        4.插槽里面可以传入标签,字符串,还可以传入子组件
        5.父模板里面调用的数据属性,使用的都是父模板里的数据
        6.子模板里面调用的数据属性,使用的都是子模板里的数据
        7.
        8.
     -->
  </head>
  <body>
    <div id="root"></div>
    <script>
      // vue的生命周期函数
    //   slot插槽
      const app = Vue.createApp({
        data() {
          return {
            text: "父模板"
          };
        },
        template: `
                <form1>
                    <form2 />{{text}}
                </form1>
                <form1>
                    <button>提交</button>    
                </form1>
                
            `,
      });
      app.component("form1", {
        methods: {
          handbtn() {
            alert("123");
          },
        },
        template: `
                <div>
                    <input />
                    <span @click="handbtn">
                    <slot></slot>
                    </span>
                </div>
            `,
      });
    //   定义一个子组件
    app.component("form2", {
        template: `
            <div>
                test子组件也可以插入插槽里面
            </div>
        `
    })
      const vm = app.mount("#root");
    </script>
  </body>
</html>
